<template>
  <div id="app">
    <div class="nav">
      <nav>
        <!-- logo -->
        <h1 class="logo">
          <a href="/">
            <img src="../../public/images/logo.png" alt="" />
          </a>
        </h1>
        <!-- 导航 -->
        <ul class="nav-a">
          <li>
            <router-link to="/">
              <span
                @click="switchshow($event)"
                @mouseover="addshow($event)"
                @mouseout="removeshow($event)"
                class="show a"
              >
                发现音乐
              </span>
            </router-link>
          </li>

          <li>
            <router-link to="#">
              <span
                @click="switchshow($event)"
                @mouseover="addshow($event)"
                @mouseout="removeshow($event)"
              >
                我的音乐
              </span>
            </router-link>
          </li>
          <li>
            <router-link to="#">
              <span
                @click="switchshow($event)"
                @mouseover="addshow($event)"
                @mouseout="removeshow($event)"
              >
                朋友
              </span></router-link
            >
          </li>
          <li>
            <router-link to="#">
              <span
                @click="switchshow($event)"
                @mouseover="addshow($event)"
                @mouseout="removeshow($event)"
              >
                商城
              </span>
              <p></p
            ></router-link>
          </li>
          <li>
            <router-link to="#">
              <span
                @click="switchshow($event)"
                @mouseover="addshow($event)"
                @mouseout="removeshow($event)"
              >
                音乐人
              </span></router-link
            >
          </li>
          <li>
            <router-link to="#">
              <span
                @click="switchshow($event)"
                @mouseover="addshow($event)"
                @mouseout="removeshow($event)"
              >
                下载客户端
              </span>
            </router-link>
          </li>
        </ul>
        <!-- 搜索框 -->
        <div class="search">
          <span @click="search">Q</span>
          <input
            type="text"
            placeholder="音乐/视频/电台/用户"
            v-model="keyword"
            @keyup.enter="search($event)"
            @keyup="keywords"
            @blur="hidekeyword"
            @focus="showkeyword"
          />
          <div class="keyword" v-if="iskeyword">
            <Keyword :keyword="keyword"></Keyword>
          </div>
        </div>
        <!-- 创作者中心 -->
        <a href="/" class="creator">创作者中心</a>
        <!-- 登录 -->
        <div class="login">
          <a href="/">登录</a>
        </div>
      </nav>
    </div>
    <router-view :key="$route.fullPath"></router-view>
  </div>
</template>

<script>
import Keyword from "../components/Keyword.vue";
export default {
  components: { Keyword },
  data() {
    return {
      // 是否显示提示框
      iskeyword: false,
      // 输入框内容
      keyword: "",
    };
  },
  methods: {
    addshow(e) {
      if (e.target.className === "show a") {
        return;
      }
      e.target.className = "show";
    },
    removeshow(e) {
      if (e.target.className === "show a") {
        return;
      }
      e.target.className = "";
    },
    switchshow(e) {
      let ul = e.path[3].querySelectorAll("span");
      for (let i = 0; i < ul.length; i++) {
        ul[i].className = "";
      }
      e.target.className = "show a";
    },
    search(e) {
      e.target.blur();
      this.iskeyword = false;
      if (this.keyword) {
        this.$router.push(`/qwe/search/1/${this.keyword}`);
      }
    },
    keywords() {
      if (this.keyword) {
        this.iskeyword = true;
      } else {
        this.iskeyword = false;
      }
    },
    // 隐藏搜索提示框
    hidekeyword() {
      setTimeout(() => {
        this.iskeyword = false;
      }, 100);
    },
    // 显示搜索提示框
    showkeyword() {
      if (this.keyword) {
        this.iskeyword = true;
      }
    },
  },
};
</script>
<style scoped>
.nav {
  width: 100%;
  height: 70px;
  background-color: #242424;
  border-bottom: 1px solid #000000;
}
nav {
  width: 1100px;
  height: 70px;
  background-color: #242424;
  border-bottom: 1px solid #000000;
  margin: 0 auto;
  display: flex;
  align-items: center;
}
/* logo部分 */
nav .logo {
  width: 177px;
  height: 70px;
  display: flex;
  align-items: center;
  padding-right: 20px;
}
nav .logo img {
  width: 160px;
  height: 35px;
}
/* 导航部分 */
nav .nav-a {
  display: flex;
  color: #ffffff;
}
nav .nav-a li {
  position: relative;
  height: 70px;
  line-height: 70px;
  cursor: pointer;
}
nav .nav-a span {
  display: block;
  height: 100%;
  width: 100%;
  padding: 0 15px;
}
nav .nav-a a {
  display: block;
  height: 100%;
  width: 100%;
  color: #cccccc;
}
nav .nav-a .show {
  background-color: #000000;
}
nav .nav-a .show a {
  color: #ffffff;
}
/* 小三角 */
/* .triangle {
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-bottom-color: #c20c0c;
} */
/* 搜索框 */
nav .search {
  position: relative;
  width: 158px;
  height: 32px;
  border-radius: 16px;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  padding: 0 10px;
  margin-left: 30px;
}
nav .search > span {
  display: block;
  width: 40px;
  cursor: pointer;
}
nav .search input {
  outline: none;
  border: none;
  width: 118px;
  font-size: 12px;
}
/* 提示框 */
.keyword {
  position: absolute;
  top: 40px;
  left: 0px;
  width: 240px;
  background-color: #ffffff;
  box-shadow: 0 4px 7px #555;
  border-radius: 3px;
  z-index: 10;
}
/* 创作者 */
nav .creator {
  display: block;
  width: 90px;
  height: 32px;
  color: #cccccc;
  font-size: 12px;
  margin-left: 12px;
  border: 1px solid #cccccc;
  border-radius: 16px;
  line-height: 32px;
  text-align: center;
}
nav .creator:hover {
  color: #ffffff;
  border: 1px solid #ffffff;
}
/* 登录 */
nav .login {
  width: 50px;
  height: 45px;
  margin-left: 20px;
  display: flex;
  align-items: center;
  font-size: 12px;
}
nav .login a {
  color: #787878;
}
</style>